<template>
  <div class="video-list-page">
    <!-- 视频列表展示 -->
    <el-row :gutter="20">
      <el-col
        v-for="video in videoList"
        :key="video.id"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
      >
        <el-card
          class="video-card"
          shadow="hover"
          @click="handleVideoClick(video)"
        >
          <div class="video-cover">
            <el-image :src="video.cover" fit="cover" loading="lazy">
              <template #placeholder>
                <div class="image-placeholder">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
            <span class="duration">{{ video.duration }}</span>
            <div class="play-icon">
              <el-icon><VideoPlay /></el-icon>
            </div>
          </div>

          <div class="video-info">
            <h3 class="title">{{ video.title }}</h3>
            <div class="author">
              <el-avatar :size="24" :src="video.author.avatar" />
              <span class="name">{{ video.author.name }}</span>
            </div>
            <div class="stats">
              <span>{{ video.stats.views }} 播放</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 视频播放弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="currentVideo?.title"
      width="800px"
      @closed="handleDialogClose"
    >
      <div class="video-player-container">
        <div v-if="loading" class="loading-overlay">
          <el-icon class="is-loading"><Loading /></el-icon>
        </div>
        <!-- videoUrl -->
        <iframe
          v-if="currentVideo"
          :src="currentVideoUrl"
          scrolling="no"
          border="0"
          frameborder="no"
          framespacing="0"
          allowfullscreen="true"
          class="video-iframe"
          @load="handleVideoLoad"
          @error="handleVideoError"
          sandbox="allow-scripts allow-same-origin allow-presentation"
        ></iframe>
      </div>

      <div v-if="currentVideo" class="video-info-panel">
        <div class="author-info">
          <el-avatar :size="40" :src="currentVideo.author.avatar" />
          <div class="author-detail">
            <div class="name">{{ currentVideo.author.name }}</div>
            <div class="time">{{ currentVideo.publishTime }}</div>
          </div>
          <el-button
            type="primary"
            size="small"
            class="follow-btn"
            :icon="Plus"
            @click="handleFollow"
          >
            关注
          </el-button>
        </div>
        <div class="description">{{ currentVideo.description }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { mockKuaishouData } from './kuaishouData'

const router = useRouter()
const videoList = ref([])
const currentVideo = ref(null)
const dialogVisible = ref(false)
const loading = ref(true)

// 计算当前视频URL
const currentVideoUrl = computed(() => {
  if (!currentVideo.value) return ''
  return mockKuaishouData.getVideoUrl(currentVideo.value)
})

// 加载视频列表
const loadVideoList = async () => {
  try {
    const { list } = await mockKuaishouData.getVideoList()
    videoList.value = list
  } catch (error) {
    ElMessage.error('加载视频列表失败')
  }
}

// 处理视频点击
const handleVideoClick = async (video) => {
  try {
    loading.value = true
    currentVideo.value = video
    dialogVisible.value = true

    // 更新URL参数
    router.push({
      query: {
        videoId: video.id,
        platform: 'kuaishou',
      },
    })

    // 预加载视频信息
    await mockKuaishouData.getVideoStats(video.id)
  } catch (error) {
    ElMessage.error('视频加载失败')
    loading.value = false
  }
}

// 处理视频加载完成
const handleVideoLoad = () => {
  loading.value = false
}

// 处理视频加载错误
const handleVideoError = () => {
  loading.value = false
  ElMessage.error({
    message: '视频加载失败，请尝试在新窗口打开',
    duration: 5000,
  })
  // 提供备选方案
  window.open(currentVideo.value.videoUrl, '_blank')
}

// 处理弹窗关闭
const handleDialogClose = () => {
  currentVideo.value = null
  loading.value = true
  // 清除URL参数
  router.push({ query: {} })
}

// 从URL参数加载视频
const loadVideoFromQuery = async () => {
  const { videoId, platform } = router.currentRoute.value.query
  if (videoId && platform === 'kuaishou') {
    try {
      const video = await mockKuaishouData.getVideoDetail(videoId)
      currentVideo.value = video
      dialogVisible.value = true
    } catch (error) {
      ElMessage.error('视频不存在')
    }
  }
}

onMounted(() => {
  loadVideoList()
  loadVideoFromQuery()
})
</script>

<style lang="scss" scoped>
.video-list-page {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;

  .video-card {
    margin-bottom: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    &:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);

      .play-icon {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      .video-cover .el-image {
        transform: scale(1.05);
      }
    }

    .video-cover {
      position: relative;
      aspect-ratio: 16/9;
      overflow: hidden;
      background: #000;

      .el-image {
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease;
      }

      .duration {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.75);
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 2;
      }

      .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        width: 56px;
        height: 56px;
        background: rgba(255, 78, 0, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 2;
        cursor: pointer;

        .el-icon {
          font-size: 28px;
          color: #fff;
        }
      }

      .image-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0f2f5;
        color: #909399;
      }
    }

    .video-info {
      padding: 16px;

      .title {
        margin: 0 0 12px;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        color: #303133;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 44px;
      }

      .author {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;

        .name {
          font-size: 14px;
          color: #606266;
        }
      }

      .stats {
        color: #909399;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 16px;

        span {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }
  }
}

// 弹窗样式优化
:deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;

  .el-dialog__header {
    margin: 0;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f2f5;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }

  .el-dialog__body {
    padding: 24px;
  }
}

.video-player-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  backdrop-filter: blur(4px);

  .el-icon {
    font-size: 36px;
    animation: spin 1s linear infinite;
  }
}

.video-info-panel {
  margin-top: 24px;
  padding: 0 4px;

  .author-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 12px;

    .author-detail {
      flex: 1;

      .name {
        font-weight: 600;
        font-size: 16px;
        color: #303133;
        margin-bottom: 4px;
      }

      .time {
        color: #909399;
        font-size: 13px;
      }
    }
  }

  .description {
    color: #606266;
    line-height: 1.8;
    font-size: 14px;
    background: #f8f9fa;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
  }
}

// 添加加载动画
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 响应式调整
@media screen and (max-width: 768px) {
  .video-list-page {
    padding: 16px;
  }

  .video-card {
    .video-info {
      padding: 12px;

      .title {
        font-size: 14px;
        height: 40px;
      }
    }
  }

  :deep(.el-dialog) {
    width: 90% !important;
    margin: 5vh auto !important;
  }
}
</style>
